<template>
        <div class="login-container">
            <div class="login-box">
                <!--头像区-->
                <div class="avatar-box">
                    <img src="../assets/logo.jpg"/>
                </div>
                <!--表单区-->
                <div >
                    <el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="60px" class="login_form" >
                        <el-form-item  prop="username">
                            <el-input prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password"></el-input>
                        </el-form-item>
                        <el-form-item class="btn">
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-button type="info" @click="resetLogin">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

        </div>
</template>

<script>
    //import {login} from "../api/login";

    export default {
        name: "Login",
        data(){
            return {
                loginForm:{
                    username:'admin',
                    password:'123456'
                },
                //表单校验
                loginFormRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入用户密码', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                    ]
                }

            }
        },
        mounted() {

        },
        methods:{
            login(){
                // 表单校验
                //console.log(this.$refs.loginFormRef.validate);    promise 函数
               this.$refs.loginFormRef.validate(async valid=>{
                   //console.log(valid);
                   if (valid){
                       // 1.请求接口
                       const {data:res} = await this.$http.post('login', this.loginForm)
                       //console.log(res)
                       if (res.meta.status != 200){
                           this.$message.error("登录失败!")
                       }else {
                           this.$message.success("登录成功!")
                           // 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存
                           //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
                           //   1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
                           window.sessionStorage.setItem("token",res.data.token)
                           this.$router.push("/index")
                       }
                   }else{
                       return false;
                   }
               })
            },
            resetLogin(){
                // resetFields：element-ui提供的表单方法
                //prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
                this.$refs.loginFormRef.resetFields();
                this.loginForm={}
                /*this.loginForm.username = "";
                this.loginForm.password = "";*/
            }
        }
    }
</script>

<style type="less" scoped>
    .login-container{
        background-color: #FEF5CC;
        height: 100%;
    }
    .login-box{
        width: 450px;
        height: 360px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .avatar-box{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px #ddd;
        border-radius: 50%;
        padding: 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #FFFFFF;

    }
    img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .login_form{
        position: absolute;
        width: 100%;
        /*bottom: 70px;*/
        top: 30%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .btn{
        display: flex;
        justify-content: center;
    }
</style>